<template>
  <div class="app-container">
    <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery">
      <template slot="datetimeRange">
        <YxhyDatetimeRange
          :type="`month`"
          :start-date.sync="queryParams.month_start"
          :end-date.sync="queryParams.month_end"
          :start-placeholder="`开始月份`"
          :end-placeholder="`结束月份`"
        />
      </template>
    </YxhyTableQuery>

    <YxhyTableData
      :columns="columns"
      :data="tableList"
      :loading="loading"
    >
      <!-- 打款时间插槽  -->
      <template #payment_at>
        <el-table-column align="center" label="打款时间" :width="columnDateTimeWidth()">
          <template slot-scope="{ row }">
            <p class="font-color-td width-create-time">{{ row.payment_at | domEmpty }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 插槽内容 -->
      <template #action>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <div class="table-action-panel">
              <template v-if="scope.row.status === 1">
                <el-button type="primary" size="mini" @click="handleUpdateStatus(scope.row, 2)">金额确认无误</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

  </div>
</template>

<script>
import { columnsStatic, STATUS } from './Ds.js'
import { querySettleList, settlementConfirm } from '@/api/settlement/settle'
export default {
  name: 'SettleList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        status: undefined,
        month_start: undefined,
        month_end: undefined
      },
      // 查询表单
      queryColumns: [
        {
          label: '',
          type: 'datetimeRange',
          param: 'month_start'
        },
        {
          label: '',
          placeholder: '状态',
          type: 'select',
          param: 'status',
          selectOptions: [
            { name: '待确认', value: 1 },
            { name: '已确认', value: 2 },
            { name: '已支付', value: 3 },
            { name: '拒绝支付', value: 4 }
          ] // 下拉框选项
        }
      ],
      loading: false,
      // 表格列
      columns: columnsStatic
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await querySettleList({
        ...this.queryPage,
        ...this.queryParams
      })
      res.data.map(e => {
        const { tax_rate, amount, actual_amount, status, settle_contract, company } = e
        e.tax_rate_text = `${tax_rate}%`
        e.amount_text = `￥${amount}`
        e.actual_amount_text = `￥${actual_amount}`
        e.status_text = STATUS[status]
        e.settle_contract = settle_contract || '-'
        e.company = company || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        flag: true,
        level: undefined,
        dd_into_rate: undefined,
        order_rate: undefined,
        note: undefined
      }
      this.resetForm('formRef')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.init()
    },
    /** 修改状态操作 */
    async handleUpdateStatus(row, status) {
      this.$confirm('确定要操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = row
        settlementConfirm({
          id
        }).then(res => {
          row.status = status
          row.status_text = STATUS[status]
          this.$modal.msgSuccess('操作成功')
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
